<template>
  <div class="fraction-count">
    <div class="bg_box">
      <img src="/img/mobile/fraction_count_bg.png" alt="" />
    </div>
    <div class="discount-content">
      <div :class="['header-top', scroll > 0 ? 'active' : '']">
        <div class="header_left" @click="toBack">
          <van-icon name="arrow-left" style="margin-left:.2rem;" />
        </div>
        <div class="center_title">分数统计</div>
        <div class="header_right"></div>
      </div>
      <div class="fixed-box"></div>
      <template v-if="is_manual_correct == 1">
        <div class="fraction-content">
          <div class="test-name">
            亲爱的学员{{
              user_info.acName
            }}，本次考试完成，考试成绩届时会在考试记录中显示！
          </div>
          <div class="fraction-son">
            <img src="/img/mobile/fraction-son.png" alt="" />
          </div>
          <div class="btn-list">
            <div
              class="btn-item btn-left"
              @click="toTestRecord"
              style="margin: auto;"
            >
              考试记录
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="fraction-content" v-show="type == 'fraction'">
          <div class="test-name">
            亲爱的学员{{ user_info.acName }}，您本次考试《{{
              paperDetail.name
            }}》成绩为
          </div>
          <div class="fraction">
            <span class="fraction-sum">{{ testRecord.score }}</span>
            <span>分</span>
          </div>
          <div class="btn-list">
            <div class="btn-item btn-left" @click="wrongQuestionHandle">
              本次错题
            </div>
            <div class="btn-item btn-right" @click="testReview">考试回顾</div>
          </div>
          <div class="fraction-tips">
            <span v-if="testRecord.score >= paperDetail.passScore">您本次成绩及格啦～，要不断超越自己哦！</span>
            <span v-else>您本次成绩不及格哟～，要继续加油哦！</span>
          </div>
          <div class="fraction-son">
            <img src="/img/mobile/fraction-son.png" alt="" />
          </div>
        </div>
        <div class="fraction-content" v-show="type == 'wrong'">
          <div class="wrong-item" v-if="all_statistics.single.length > 0">
            <div class="item-left">
              <span class="serial-number">{{findObjKeyIndex('single')}}</span>
              <span class="question-name">单选题({{all_statistics.single.length}})</span>
            </div>
            <div class="item-right">
              <span class="accuracy-count">正确率：{{ accuracy(1) }}%</span>
              &emsp;&emsp;
              <span class="wrong-count"
                >错误{{ wrong_statistics.single.length }}道</span
              >
              <!-- <img class="right_icon" src="/img/mobile/right-icon.png" alt="" /> -->
            </div>
          </div>
          <div class="wrong-item" v-if="all_statistics.multiple.length > 0">
            <div class="item-left">
              <span class="serial-number">{{findObjKeyIndex('multiple')}}</span>
              <span class="question-name">多选题({{all_statistics.multiple.length}})</span>
            </div>
            <div class="item-right">
              <span class="accuracy-count">正确率：{{ accuracy(2) }}%</span>
              &emsp;&emsp;
              <span class="wrong-count"
                >错误{{ wrong_statistics.multiple.length }}道</span
              >
              <!-- <img class="right_icon" src="/img/mobile/right-icon.png" alt="" /> -->
            </div>
          </div>
          <div class="wrong-item" v-if="all_statistics.short.length > 0">
            <div class="item-left">
              <span class="serial-number">{{findObjKeyIndex('short')}}</span>
              <span class="question-name">简答题({{all_statistics.short.length}})</span>
            </div>
            <div class="item-right">
              <span class="accuracy-count">正确率：{{ accuracy(3) }}%</span>
              &emsp;&emsp;
              <span class="wrong-count"
                >错误{{ wrong_statistics.short.length }}道</span
              >
              <!-- <img class="right_icon" src="/img/mobile/right-icon.png" alt="" /> -->
            </div>
          </div>
          <div class="wrong-item" v-if="all_statistics.cloze.length > 0">
            <div class="item-left">
              <span class="serial-number">{{findObjKeyIndex('cloze')}}</span>
              <span class="question-name">填空题({{all_statistics.cloze.length}})</span>
            </div>
            <div class="item-right">
              <span class="accuracy-count">正确率：{{ accuracy(4) }}%</span>
              &emsp;&emsp;
              <span class="wrong-count"
                >错误{{ wrong_statistics.cloze.length }}道</span
              >
              <!-- <img class="right_icon" src="/img/mobile/right-icon.png" alt="" /> -->
            </div>
          </div>
          <div class="wrong-item" v-if="all_statistics.judgment.length > 0">
            <div class="item-left">
              <span class="serial-number">{{findObjKeyIndex('judgment')}}</span>
              <span class="question-name">判断题({{all_statistics.judgment.length}})</span>
            </div>
            <div class="item-right">
              <span class="accuracy-count">正确率：{{ accuracy(5) }}%</span>
              &emsp;&emsp;
              <span class="wrong-count"
                >错误{{ wrong_statistics.judgment.length }}道</span
              >
              <!-- <img class="right_icon" src="/img/mobile/right-icon.png" alt="" /> -->
            </div>
          </div>
          
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getTestReview,
  getQuestionBankPaperOne
} from "~/api/v2-question-bank/question-bank.js";
import _templete from "../../components/_templete.vue";
export default {
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: { _templete },
  data() {
    return {
      scroll: 0,
      /* 考试记录详情 */
      testRecord: {
        score: ""
      },
      /* 各个题型错误的题数 */
      wrong_statistics: {
        single: [],
        multiple: [],
        short: [],
        cloze: [],
        judgment: []
      },
      /** 试卷各个题型的题数 */
      all_statistics: {
        single: [],
        multiple: [],
        short: [],
        cloze: [],
        judgment: []
      },
      /* 试卷详情 */
      paperDetail: {
        name: ""
      }
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      shallowColor(state) {
        return state.web_info.THEME_COLOR + "32";
      }
    }),
    type() {
      return this.$route.query.type;
    },
    /* 题库ID */
    questionId() {
      return this.$route.query.questionId;
    },
    /* 考试记录Id */
    testRecordId() {
      return this.$route.query.testRecordId;
    },
    /* 考试类型 */
    testType() {
      return this.$route.query.testType;
    },
    /* 试卷Id */
    testId() {
      return this.$route.query.testId;
    },
    /* 是否是手动改卷 */
    is_manual_correct() {
      const { is_manual_correct } = this.$route.query;
      return is_manual_correct ? Number(is_manual_correct) : 0;
    },
    /* 是否从考试页面进来 */
    is_just_test() {
      return this.$route.query.is_just_test;
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    findObjKeyIndex(type){
      let keys = [];
      for(let item in this.all_statistics){
        console.log(this.all_statistics[item])
        if(this.all_statistics[item].length > 0){
          keys = [...keys,item]
        }
      }
      return keys.findIndex(item=>item == type) + 1;
    },
    accuracy(type) {
      switch (type) {
        case 1:
          if((this.all_statistics.single.length - this.wrong_statistics.single.length) == 0){
            return 0
          }else{
            return (
              (
                (this.all_statistics.single.length -
                  this.wrong_statistics.single.length) /
                this.all_statistics.single.length
              ).toFixed(2) * 100
            );
          }
        case 2:
          if((this.all_statistics.multiple.length - this.wrong_statistics.multiple.length) == 0){
            return 0
          }else{
            return (
              (
                (this.all_statistics.multiple.length -
                  this.wrong_statistics.multiple.length) /
                this.all_statistics.multiple.length
              ).toFixed(2) * 100
            );
          }
        case 3:
          if((this.all_statistics.short.length - this.wrong_statistics.short.length) == 0){
            return 0
          }else{
            return (
              (
                (this.all_statistics.short.length -
                  this.wrong_statistics.short.length) /
                this.all_statistics.short.length
              ).toFixed(2) * 100
            );
          }
        case 4:
          if((this.all_statistics.cloze.length - this.wrong_statistics.cloze.length) == 0){
            return 0
          }else{
            return (
              (
                (this.all_statistics.cloze.length -
                  this.wrong_statistics.cloze.length) /
                this.all_statistics.cloze.length
              ).toFixed(2) * 100
            );
          }
        case 5:
          if((this.all_statistics.judgment.length - this.wrong_statistics.judgment.length) == 0){
            return 0
          }else{
            return (
              (
                (this.all_statistics.judgment.length -
                  this.wrong_statistics.judgment.length) /
                this.all_statistics.judgment.length
              ).toFixed(2) * 100
            );
          }
        default:
          return 0;
      }
    },
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    },
    toBack() {
      if (this.is_just_test) {
        this.$router.back();
        this.$router.back();
        this.$router.back();
      } else {
        this.$router.back();
      }
    },
    wrongQuestionHandle() {
      console.log("查看错题");
      this.$router.push({
        path: "/m/v2-fraction-count",
        query: {
          type: "wrong",
          testType: this.testType,
          testRecordId: this.testRecordId
        }
      });
    },
    /* 考试回顾 */
    testReview() {
      this.$router.push({
        path: "/m/v2-answer-sheet",
        query: {
          type: this.testType,
          testRecord: this.testRecordId,
          testId: this.testId,
          review: 1
        }
      });
    },
    /* 获取考试记录详情 */
    async getTestReview() {
      this.SET_IS_LOADING(true);
      let params = {
        id: this.testRecordId
      };
      let result = await getTestReview(params);
      console.log("获取考试记录详情:", result);
      if (result && result.data && result.data.data) {
        const { data } = result.data;
        this.testRecord = data;
        const { items } = data;
        this.wrong_statistics = {
          single: items.filter(
            i =>
              i.questionType == 1 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          multiple: items.filter(
            i =>
              i.questionType == 2 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          short: items.filter(
            i =>
              i.questionType == 3 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          cloze: items.filter(
            i =>
              i.questionType == 4 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          judgment: items.filter(
            i =>
              i.questionType == 5 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          )
        };
        this.all_statistics = {
          single: items.filter(i => i.questionType == 1),
          multiple: items.filter(i => i.questionType == 2),
          short: items.filter(i => i.questionType == 3),
          cloze: items.filter(i => i.questionType == 4),
          judgment: items.filter(i => i.questionType == 5)
        };
      }
      this.SET_IS_LOADING(false);
    },
    /* 获取试卷详情 */
    async getQuestionBankPaperOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankPaperOne(this.testId);
      console.log("获取试卷详情：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.paperDetail = {
            ...this.paperDetail,
            ...data,
            span: Number(data.span) * 60 * 1000
          };
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 跳转考试记录 */
    toTestRecord() {
      this.$router.push({
        path: "/m/v2-test-record",
        query: {
          questionType: this.testType,
          id: this.questionId
        }
      });
    },
    initPage() {
      this.getQuestionBankPaperOne();
      this.getTestReview();
    }
  },
  activated() {
    this.initPage();
  },
  deactivated() {},
  beforeDestroy() {},
  created() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.fraction-count {
  min-height: 100vh;
  background-color: var(--theme-color);
  .bg_box {
    position: fixed;
    left: 0;
    top: 0;
    width: 7.2rem;
    height: 8.064rem;
    z-index: 0;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .fraction-content {
    width: 6.624rem;
    padding: 0.288rem 0;
    background-color: #ffffff;
    border-radius: 0.192rem;
    margin: 0.4rem auto;
    position: relative;
    z-index: 1;
    //分数
    .test-name {
      font-size: 0.288rem;
      padding: 0.2rem 1.4rem;
      color: #4a4b4d;
      text-align: center;
      line-height: 0.5rem;
    }
    .fraction {
      color: #f39090;
      font-size: 0.34559rem;
      text-align: center;
      .fraction-sum {
        font-size: 0.5376rem;
      }
    }
    .btn-list {
      padding: 0.288rem 0.488rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.026rem solid #f7f7fa;
      .btn-item {
        width: 1.92rem;
        height: 0.6335rem;
        background-color: var(--theme-color);
        border-radius: 0.31679rem;
        color: #ffffff;
        line-height: 0.6335rem;
        text-align: center;
        font-size: 0.288rem;
      }
    }
    .fraction-tips {
      font-size: 0.2688rem;
      padding: 0.4rem 0.576rem;
      text-align: center;
      color: #949699;
    }
    .fraction-son {
      width: 3.5712rem;
      height: 2.928rem;
      margin: 0 auto;
      background-color: #ffffff;
      margin-bottom: 0.4rem;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    //错题
    .wrong-item {
      width: 100%;
      height: 1.44rem;
      background: #ffffff;
      border-bottom: 0.026rem solid #ededf1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.288rem;
      &:last-child {
        border-bottom: none;
      }
      .item-left {
        .serial-number {
          display: inline-block;
          width: 0.4608rem;
          height: 0.4608rem;
          background-color: var(--theme-color);
          box-shadow: 0 0.0576rem 0.096rem 0 rgba(48, 124, 255, 0.2);
          font-size: 0.2496rem;
          text-align: center;
          color: #ffffff;
          line-height: 0.4608rem;
          border-radius: 50%;
        }
        .question-name {
          color: #494b4d;
          font-size: 0.288rem;
          margin-left: 0.2rem;
          font-weight: bold;
        }
      }
      .item-right {
        display: flex;
        align-items: center;
        .accuracy-count {
          color: #949699;
          font-weight: bold;
          font-size: 0.2496rem;
          display: inline-block;
          width: 1.8rem;
        }
        .wrong-count {
          color: #949699;
          font-weight: bold;
          font-size: 0.2496rem;
        }
        .right_icon {
          margin: 0 0.1rem;
          width: 0.2304rem;
          height: 0.2304rem;
          display: block;
        }
      }
    }
  }
  .header-top {
    width: 7.2rem;
    height: 0.9rem;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0.9rem;
    display: flex;
    align-items: center;
    box-shadow: none;
    .header_left {
      width: 15%;
      color: #ffffff;
      font-size: 0.35rem;
      display: flex;
      align-items: center;
    }
    .center_title {
      width: 70%;
      text-align: center;
      font-size: 0.3456rem;
      color: #ffffff;
      font-weight: bold;
    }
    .header_right {
      width: 15%;
      img {
        margin: 0 auto;
        display: block;
        width: 0.6111rem;
        height: 0.6111rem;
      }
    }
  }
  .header-top.active {
    background: var(--theme-color);
  }
  .fixed-box {
    width: 100%;
    height: 0.9rem;
  }
}
</style>
<style lang="scss">
.fraction-count {
}
</style>
